<script lang="ts" setup name="亚运安保">
import { ref, reactive, computed, onMounted, h } from "vue";
import ProFrom from "@/components/ProFrom";
import ProTable from "@/components/ProTable";
import { message, Modal } from "ant-design-vue";
import { queryFormMap, editFormMap } from "./form";
import { columns } from "./table";
import { setBaseApi, get, post, del } from "@/api/http";
import { useAuthStore, useGlobalStore } from "@/stores";
const { updateStaffList, dictionary } = useGlobalStore();

setBaseApi("/watch/security/");

const status = ref<boolean>(false);
const onChangeStatus = (securityStatus: number) => {
  post(
    "statusUpdate",
    { securityStatus },
    securityStatus == 2 ? "启动" : "关闭"
  );
};

const dateRange = ref(["2023-06-10", "2023-07-10"]);

get("getSecurityStatus").then(({ securityStatus }: any) => {
  if (securityStatus) status.value = securityStatus;
});

const queryForm = reactive({});
const querying = ref<boolean>(false);
const queryFormRef = ref<InstanceType<typeof ProFrom>>();

const tableRef = ref<InstanceType<typeof ProTable>>();

const tableData = reactive({
  list: [],
  total: 0,
});
onMounted(() => handleQuery());

const handleQuery = () => {
  const pageParams = tableRef.value?.pageOption;

  get("page", pageParams, "", querying).then(({ list, totalCount }) => {
    tableData.list = list;
    tableRef.value?.updateTotal(totalCount);
  });
};

const editFormRef = ref<InstanceType<typeof ProFrom>>();
const editModel = reactive({
  open: false,
  editAble: true,
  title: "编辑",
  row: {} as any,
});

const onEdit = () => {
  if (editModel.title == "详情") return (editModel.open = false);
  editFormRef.value?.verify().then((data: any) => {
    const id = editModel.row?.id;
    // console.log(data);
    // return;
    post("saveOrUpdate", { ...data, id }, "提交").then(() => {
      // return;
      handleQuery();
      editModel.open = false;
    });
  });
};

const handleEdit = (row?: any) => {
  editModel.open = true;
  editModel.editAble = true;
  editModel.title = row ? "编辑" : "新增";
  editModel.row = row ?? {};
};
const handleDetail = (row: any) => {
  editModel.open = true;
  editModel.editAble = false;
  editModel.title = "详情";
  editModel.row = row;
};

// 根据选中的工作组展示 岗位职责
const getDuty = computed(() => {
  const group = editModel.row.workingGroup;
  if (!group) return "";
  const filterGroup = dictionary.workingGroup.filter(
    ({ value }) => value == group
  );
  if (!filterGroup[0]) return "";
  return filterGroup[0].duty;
});

const selected = computed(() => tableRef.value?.selectedRowKeys);

const onDelete = (row?: any) => {
  const ids = row?.id || selected.value.join(",");

  del("delete", { ids }, "删除").then(() => {
    handleQuery();
  });
};

const handleDelete = (row?: any) => {
  Modal.warning({
    title: "提示",
    okText: "确认",
    onOk: () => onDelete(row),
    centered: true,
    closable: true,
    content: () =>
      h("div", { class: "m-t-20px text-center" }, [
        h("span", { class: "tracking-1px" }, `确认删除选中人员吗？`),
      ]),
  });
};
</script>

<template>
  <section class="page">
    <header class="flex-y-center">
      <span>启动状态：</span>
      <a-switch
        @change="onChangeStatus"
        v-model:checked="status"
        :checkedValue="2"
        checkedChildren="已启动"
        :unCheckedValue="1"
        unCheckedChildren="未启动"
      >
      </a-switch>

      <span class="ml-30px">安保时段：</span>
      <a-range-picker :valueFormat="'YYYY-MM-DD'" v-model:value="dateRange" />
    </header>
    <main>
      <nav>
        <ProButton
          @click="handleEdit()"
          type="primary"
          text="新增"
          icon="plusOutlined"
        />
        <ProButton
          @click="handleQuery()"
          text="刷新"
          :loading="querying"
          icon="redoOutlined"
        />

        <ProButton
          @click="handleDelete"
          type="danger"
          text="删除"
          :disabled="!selected?.length"
          icon="deleteOutlined"
        />
      </nav>

      <ProTable
        ref="tableRef"
        selection="checkbox"
        :data="tableData.list"
        :columns="columns"
        :operate="{
          // 编辑: onEdit,
          编辑: handleEdit,
          详情: handleDetail,
          删除: handleDelete,
        }"
        @afterOperate="handleQuery"
      >
      </ProTable>
    </main>

    <a-modal
      centered
      destroyOnClose
      v-model:visible="editModel.open"
      :title="editModel.title"
      @ok="onEdit"
      :okText="editModel.editAble ? '提交' : '关闭'"
    >
      <ProFrom
        ref="editFormRef"
        :mapping="editFormMap"
        :model-value="editModel.row"
        :readonly="!editModel.editAble"
      >
        <!-- <template v-slot:footer>
          <a-col :span="24">
            <a-form-item label=" 职责">
              <p class="min-h-70px mt-5px">{{ getDuty }}</p>
            </a-form-item>
          </a-col>
        </template> -->
      </ProFrom>
    </a-modal>
  </section>
</template>

<style lang="less" scoped></style>
